Next.js ইমেজ অপটিমাইজেশন এবং সঠিক ফর্ম্যাট ব্যবহারের ক্ষেত্রে অত্যন্ত শক্তিশালী। WebP হল একটি আধুনিক ইমেজ ফর্ম্যাট যা ইমেজের কোয়ালিটি বজায় রেখে ফাইল সাইজ অনেক কমিয়ে দেয়। এটি দ্রুত লোডিং এবং সাইটের পারফরম্যান্স বাড়ানোর জন্য অত্যন্ত উপকারী। Next.js এ next/image কম্পোনেন্টের মাধ্যমে আপনি স্বয়ংক্রিয়ভাবে WebP সহ অন্যান্য ইমেজ ফর্ম্যাট ব্যবহারের সুবিধা পেতে পারেন।
এছাড়া, আপনি Custom Image Loader তৈরি করতে পারেন যা নির্দিষ্ট কাস্টম সার্ভার বা সঞ্চালন স্টোরেজ থেকে ইমেজ লোড করার জন্য ব্যবহৃত হবে।
১. Next.js এ WebP ইমেজ সাপোর্ট
Next.js এ next/image কম্পোনেন্টটি ইমেজ ফাইলের স্বয়ংক্রিয় অপটিমাইজেশন, ফরম্যাট কনভার্সন (যেমন PNG থেকে WebP) এবং ডেলিভারি পরিচালনা করে। WebP সাপোর্ট মূলত এনাবল করা থাকে এবং আপনি যদি ব্রাউজারে WebP সাপোর্ট করেন, তাহলে Next.js স্বয়ংক্রিয়ভাবে WebP ফরম্যাটে ইমেজ সার্ভ করে।
WebP ইমেজ ব্যবহারের উদাহরণ:
- প্রথমে ইমেজ ফাইলটি
publicফোল্ডারে রাখুন। ধরুন, আপনার ইমেজের নামimage.jpg। - তারপর,
next/imageকম্পোনেন্ট ব্যবহার করে ইমেজটি প্রদর্শন করুন:
// pages/index.js
import Image from 'next/image';
export default function Home() {
return (
<div>
<h1>Next.js WebP ইমেজ সাপোর্ট</h1>
<Image
src="/image.jpg" // ইমেজ ফাইলের লোকেশন
alt="WebP Example"
width={500} // ইমেজের প্রস্থ
height={300} // ইমেজের উচ্চতা
/>
</div>
);
}
এখানে, Next.js স্বয়ংক্রিয়ভাবে image.jpg ফাইলটিকে প্রাসঙ্গিক ব্রাউজার ফরম্যাটে (যেমন WebP) কনভার্ট করবে, যদি ব্রাউজারটি WebP ফরম্যাট সাপোর্ট করে।
WebP ইমেজের সুবিধা:
- ফাইল সাইজ কমানো: WebP ফরম্যাটে ছবির গুণগত মান বজায় রেখে সাইজ অনেক কম থাকে।
- দ্রুত লোডিং: ছোট সাইজের কারণে ওয়েবসাইট দ্রুত লোড হয়, যা SEO এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
- নিরাপত্তা: WebP নিরাপদ এবং এডভান্সড ফিচার সমর্থন করে, যেমন ট্রান্সপারেন্সি এবং এনিমেশন।
২. Custom Image Loader তৈরি করা
Next.js এ Custom Image Loader ব্যবহার করার মাধ্যমে আপনি নিজের ইমেজ লোডার কনফিগার করতে পারেন। এটি তখন প্রয়োজন হয় যখন আপনার ইমেজ সার্ভার বা CDN (Content Delivery Network) আপনার নির্দিষ্ট ইমেজ লোডিং পদ্ধতিতে কাস্টমাইজেশন প্রয়োজন।
Next.js এর next/image কম্পোনেন্টে loader প্রপস ব্যবহার করে আপনি কাস্টম লোডার সেট করতে পারেন।
Custom Image Loader কনফিগার করার উদাহরণ:
ধরা যাক, আপনার ইমেজ CDN ব্যবহার করছে এবং আপনি চান ইমেজটি CDN এর মাধ্যমে লোড হোক। তাহলে আপনি একটি কাস্টম লোডার তৈরি করতে পারেন।
- প্রথমে একটি কাস্টম লোডার ফাংশন তৈরি করুন:
// utils/customLoader.js
export const customLoader = ({ src, width, quality }) => {
return `https://your-cdn-url.com/${src}?w=${width}&q=${quality || 75}`;
};
এখানে, src, width, এবং quality প্যারামিটার ব্যবহার করে ইমেজ URL তৈরির জন্য লোডার ফাংশনটি কাস্টমাইজ করা হয়েছে। আপনি ইমেজ সাইজ এবং কোয়ালিটি নির্ধারণ করতে পারেন।
- এরপর,
next/imageকম্পোনেন্টে কাস্টম লোডার ব্যবহার করুন:
// pages/index.js
import Image from 'next/image';
import { customLoader } from '../utils/customLoader';
export default function Home() {
return (
<div>
<h1>Custom Image Loader Example</h1>
<Image
src="image.jpg" // ইমেজ ফাইলের লোকেশন
alt="Custom Loader"
width={500}
height={300}
loader={customLoader} // কাস্টম লোডার ব্যবহার
/>
</div>
);
}
এখানে, loader প্রপস দিয়ে আপনার কাস্টম লোডার ফাংশনটি উল্লেখ করা হয়েছে, যা ইমেজ লোড করার জন্য ব্যবহৃত হবে।
৩. Next.js এ ইমেজ অপটিমাইজেশন এবং সেরা প্র্যাকটিস
- স্বয়ংক্রিয় অপটিমাইজেশন: Next.js ইমেজ রেন্ডার করার সময় স্বয়ংক্রিয়ভাবে ইমেজ অপটিমাইজ করে, যেমন সাইজ কমানো এবং কনভার্ট করা। তবে, ইমেজ ফাইলের নাম, সাইজ এবং ফরম্যাটের উপর মনোযোগ দিতে হবে যাতে অপটিমাইজেশন সর্বোচ্চ হয়।
- Lazy Loading: Next.js ইমেজের জন্য lazy loading সক্রিয় করে, যার ফলে ইমেজটি স্ক্রিনে আসার আগে লোড হয় না। এটি পেজের লোড টাইম কমায়।
- Responsive Images: Next.js স্বয়ংক্রিয়ভাবে ইমেজের বিভিন্ন সাইজ তৈরি করে এবং সেগুলো ব্রাউজারের স্ক্রীন সাইজ অনুযায়ী সার্ভ করে।
এটি ইমেজ অপটিমাইজেশন এবং SEO উন্নত করার জন্য গুরুত্বপূর্ণ, কারণ ছোট সাইজের ইমেজ দ্রুত লোড হয়, যা ভালো ব্যবহারকারীর অভিজ্ঞতা এবং সার্চ ইঞ্জিন র্যাঙ্কিং উন্নত করে।
সারাংশ
Next.js এ WebP ইমেজ সাপোর্ট এবং কাস্টম ইমেজ লোডার ব্যবহারের মাধ্যমে আপনি ইমেজ লোডিংকে আরও কার্যকর এবং দ্রুত করতে পারেন। next/image কম্পোনেন্ট স্বয়ংক্রিয়ভাবে ইমেজ অপটিমাইজ করে এবং ব্রাউজারের ফরম্যাটের সাথে সামঞ্জস্য রেখে ফাইল সাইজ কমিয়ে দেয়। কাস্টম লোডার ব্যবহারের মাধ্যমে আপনি আপনার নির্দিষ্ট CDN বা সার্ভার থেকে ইমেজ লোড করতে পারবেন।
Read more
